<template>
  <div class="max-w-7xl mx-auto px-4">
    <div class="py-6">
      <NuxtLink to="/troublemakers"
        class="text-primary-600 dark:text-primary-400 hover:underline flex items-center transform hover:scale-105 transition-transform mb-6">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
          stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        返回排行榜
      </NuxtLink>

      <div v-if="troublemaker"
        class="bg-white dark:bg-gray-950 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-300 hover:shadow-md troublemaker-details">
        <div class="p-6 md:p-8">
          <!-- 标题和排名 -->
          <div
            class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4 border-b border-gray-200 dark:border-gray-800 pb-6">
            <div class="flex items-center gap-6">
              <div class="flex-shrink-0">
                <div
                  class="w-20 h-20 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center text-3xl font-bold text-primary-600 dark:text-primary-400 transform hover:scale-105 transition-transform shadow-sm">
                  #{{ troublemaker.rank }}
                </div>
              </div>
              <h1 class="text-3xl md:text-4xl font-bold text-balance">{{ troublemaker.name }}</h1>
            </div>
            <div class="flex flex-col items-end">
              <div class="flex items-center mb-2">
                <span class="text-sm font-medium mr-3">
                  危害指数: <span class="ml-1 font-bold text-lg" :class="getHarmScoreColorClass(troublemaker.harmScore)">
                    {{ troublemaker.harmScore }}/10
                  </span>
                </span>
              </div>
              <div class="w-full md:w-48 bg-gray-200 dark:bg-gray-700 rounded-full h-3">
                <div class="h-3 rounded-full" :style="`width: ${troublemaker.harmScore * 10}%`"
                  :class="getHarmScoreClass(troublemaker.harmScore)"></div>
              </div>
            </div>
          </div>

          <!-- 技能和描述 -->
          <div class="mb-10 bg-gray-50 dark:bg-gray-900 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex flex-wrap gap-2 mb-5">
              <span v-for="skill in troublemaker.skills" :key="skill"
                class="inline-flex items-center rounded-full px-3 py-2 text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200 transform hover:scale-105 transition-transform shadow-sm">
                {{ skill }}
              </span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">{{ troublemaker.description }}</p>
          </div>

          <!-- 行为特征和应对策略 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
            <div>
              <h2 class="text-2xl font-semibold mb-5 flex items-center border-l-4 border-red-500 pl-3">
                典型行为特征
              </h2>
              <ul
                class="space-y-4 bg-gray-50 dark:bg-gray-900 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
                <li v-for="(behavior, index) in troublemaker.behaviors" :key="index"
                  class="flex items-start p-3 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors">
                  <div class="p-1 bg-red-100 dark:bg-red-900 rounded-full mr-3 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24"
                      stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                  </div>
                  <span class="text-gray-700 dark:text-gray-300">{{ behavior }}</span>
                </li>
              </ul>
            </div>
            <div>
              <h2 class="text-2xl font-semibold mb-5 flex items-center border-l-4 border-green-500 pl-3">
                应对策略
              </h2>
              <ul
                class="space-y-4 bg-gray-50 dark:bg-gray-900 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
                <li v-for="(strategy, index) in troublemaker.strategies" :key="index"
                  class="flex items-start p-3 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors">
                  <div class="p-1 bg-green-100 dark:bg-green-900 rounded-full mr-3 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500" fill="none"
                      viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                  </div>
                  <span class="text-gray-700 dark:text-gray-300">{{ strategy }}</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- 详细分析 -->
          <div class="mb-10">
            <h2 class="text-2xl font-semibold mb-5 flex items-center border-l-4 border-primary-500 pl-3">
              详细分析
            </h2>
            <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
              <p class="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">{{ troublemaker.analysis }}</p>
              <div v-if="troublemaker.impactAreas" class="mt-8">
                <h3 class="font-medium mb-4 flex items-center">
                  <span class="inline-block w-3 h-3 bg-primary-500 rounded-full mr-2"></span>
                  主要影响范围:
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div v-for="(impact, area) in troublemaker.impactAreas || {}" :key="area"
                    class="flex flex-col p-3 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors">
                    <div class="flex items-center justify-between mb-2">
                      <span class="text-gray-700 dark:text-gray-300 font-medium">{{ area }}</span>
                      <span class="text-sm font-bold"
                        :class="impact !== undefined ? getImpactColorClass(impact) : ''">{{ impact }}</span>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                      <div class="h-2.5 rounded-full impact-area"
                        :class="impact !== undefined ? getImpactClass(impact) : ''"
                        :style="`width: ${(impact !== undefined ? impact * 10 : 0)}%`"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 真实案例 -->
          <div class="mb-10">
            <h2 class="text-2xl font-semibold mb-5 flex items-center border-l-4 border-yellow-500 pl-3">
              真实案例
            </h2>
            <div class="space-y-5">
              <div v-for="(story, index) in troublemaker.stories" :key="index"
                class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 shadow-sm hover:shadow-md transition-all transform hover:scale-[1.01] duration-300">
                <h3 class="font-medium text-lg mb-3 flex items-center text-yellow-600 dark:text-yellow-400">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                  </svg>
                  "{{ story.title }}"
                </h3>
                <p class="text-gray-600 dark:text-gray-400 mb-4 pl-7 leading-relaxed">{{ story.content }}</p>
                <div
                  class="text-sm text-gray-500 dark:text-gray-500 italic pl-7 pt-2 border-t border-gray-200 dark:border-gray-800">
                  — {{ story.source }}</div>
              </div>
            </div>
          </div>

          <!-- 您的经历 -->
          <div class="border-t border-gray-200 dark:border-gray-800 pt-8 mt-10">
            <h2 class="text-2xl font-semibold mb-5 flex items-center border-l-4 border-blue-500 pl-3">
              您的经历
            </h2>
            <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-8 text-center shadow-sm">
              <div
                class="mx-auto w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" fill="none" viewBox="0 0 24 24"
                  stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <p class="text-gray-700 dark:text-gray-300 mb-6 max-w-2xl mx-auto">您在职场中遇到过类似的人物？或者有更多信息想要分享？请与我们联系。</p>
              <a href="mailto:klau.lover@gmail.com"
                class="btn btn-primary transform hover:scale-105 transition-transform inline-flex items-center justify-center px-6 py-3 rounded-full">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
                  stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                分享您的经历
              </a>
            </div>
          </div>
        </div>
      </div>

      <div v-else
        class="bg-white dark:bg-gray-950 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800 p-8 text-center troublemaker-details transition-all duration-300 hover:shadow-md">
        <div class="mx-auto w-20 h-20 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-500" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <h1 class="text-2xl font-bold mb-4">人物信息未找到</h1>
        <p class="text-gray-600 dark:text-gray-400 mb-6 max-w-md mx-auto">抱歉，我们找不到您请求的人物信息。这可能是因为该人物尚未被记录或者链接无效。</p>
        <NuxtLink to="/troublemakers"
          class="btn btn-primary transform hover:scale-105 transition-transform inline-flex items-center justify-center px-6 py-3 rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          返回排行榜
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useNuxtApp } from '#app';

// 获取GSAP实例和路由参数
const { $gsap } = useNuxtApp();
const route = useRoute();
const troublemakerId = route.params.id as string;

// 模拟数据
const troublemakersData = [
  {
    id: '1',
    name: '王背锅专员',
    rank: 1,
    skills: ['甩锅大师', '责任转移', '避重就轻'],
    harmScore: 9.5,
    description: '工作能力极差，但甩锅能力一流。项目出问题第一时间找替罪羊，从不承认自己的错误，擅长把责任推给团队其他成员。',
    behaviors: [
      '从不记录自己的承诺和任务，便于后期否认',
      '总是在团队会议上保持沉默，等出问题时再甩锅',
      '擅长利用模棱两可的语言为自己留后路',
      '精通管理上级对自己的印象，对下对上两张脸',
      '对自己不熟悉的领域接任务时，从不明确表示能力限制',
      '出了问题总是能找到别人的"疏忽"或"失误"'
    ],
    strategies: [
      '要求所有会议和任务分配有书面记录，并明确责任人',
      '与其共事时，将关键决策和沟通内容记录在邮件或工作系统中',
      '在项目中明确职责划分，拒绝模糊的任务边界',
      '定期进行工作进度更新，不给其留下责任转移的机会',
      '学会识别其转嫁责任的话术，及时澄清事实',
      '面对其甩锅行为，保持冷静，用事实和证据说话'
    ],
    analysis: '这类人物最大的特点是对自己的错误零容忍，但却对他人的错误异常敏感。他们通常会在项目开始时保持低调，不发表明确意见，一旦项目出现问题，立即成为"事后诸葛亮"，指出他人的错误。他们往往精通办公室政治，善于维护与上级的关系，确保自己在权力结构中处于有利位置。长期与这类人共事会导致团队信任氛围崩溃，因为大家都害怕成为下一个"替罪羊"。',
    impactAreas: {
      '团队信任': 9.7,
      '工作效率': 8.5,
      '项目风险': 9.2,
      '职场氛围': 9.0,
      '个人压力': 9.6
    },
    stories: [
      {
        title: "全员背锅，唯我独醒",
        content: '我们部门有个项目经理，每次项目启动时对各种要求都点头称是，从不提出疑问或风险。但一旦项目延期或出现问题，他立刻变成了"预言家"，声称自己早就预见到了问题，只是"其他人"没有重视。最可怕的是，他每次能找出邮件或会议记录中的只言片语来"证明"自己曾经提醒过，但实际上那些所谓的"提醒"模糊不清，根本无法作为真正的风险预警。',
        source: "某互联网公司产品设计师"
      },
      {
        title: "背锅侠养成记",
        content: '刚入职不久，我就被分配给一个经验丰富的"导师"带。起初我很感激，但慢慢发现每当我俩共同负责的工作出问题，他总能巧妙地把责任推给我这个"新人"。最讽刺的是，在团队会议上他还会以"帮助新人成长"为由，详细分析我的"错误"，看似是在帮我，实际是在甩锅的同时还树立自己"好导师"的形象。',
        source: "某科技公司初级工程师"
      }
    ]
  },
  {
    id: '2',
    name: '李马屁精英',
    rank: 2,
    skills: ['拍马屁', '两面三刀', '信息控制'],
    harmScore: 9.2,
    description: '面对上级时一副谄媚嘴脸，对下属却趾高气扬。擅长通过控制信息流动来操控团队关系，打压潜在竞争对手。',
    behaviors: [
      '总是第一个响应领导的提议，即使明知是错的也会大力支持',
      '在领导面前频繁提及自己的"贡献"和"牺牲"',
      '暗中收集同事的错误和把柄，等待合适时机使用',
      '经常私下传递负面信息，制造团队成员间的不信任',
      '精通察言观色，能迅速调整立场以迎合当权者',
      '刻意制造小团体，掌握信息流通渠道'
    ],
    strategies: [
      '保持专业，以工作成果说话，不参与其制造的办公室政治',
      '与其共事时确保信息透明，建立开放的沟通渠道',
      '不要轻易分享个人信息或对他人的负面评价',
      '发现其散布不实信息时，及时澄清但不要正面冲突',
      '与领导保持良好但专业的关系，避免被其孤立',
      '记录重要沟通内容，避免信息被扭曲'
    ],
    analysis: '这类人物的核心特质是权力导向和自我中心，他们将职场视为一场零和游戏，通过讨好上级和打压同级来获取个人利益。他们往往有极强的社交敏感度，善于察言观色，了解不同人期望听到什么。这使他们能够在不同的人面前展现不同的面孔，收集和控制信息，并在合适的时机利用这些信息。长期来看，这类人物会严重损害团队的信任基础和协作氛围，造成团队分裂。',
    impactAreas: {
      '团队信任': 9.5,
      '工作效率': 8.0,
      '项目风险': 7.8,
      '职场氛围': 9.6,
      '个人压力': 8.9
    },
    stories: [
      {
        title: "办公室信息掮客",
        content: "我们部门有位'资深'同事，对领导永远是满脸笑容，各种恭维。他特别擅长搜集信息，常常单独约不同同事吃饭聊天，套取各种办公室八卦和大家对项目的看法。一开始我们都觉得他人挺好，愿意跟他分享。后来才发现，他会把这些信息进行筛选和扭曲，传递给领导，突出对他有利的部分。最可怕的是，他会把领导的一些不经意的抱怨放大，然后'善意'地提醒当事人，让大家都感到不安，而他则成了信息的中心。",
        source: "某跨国公司市场部主管"
      },
      {
        title: "领导换人，立场转180度",
        content: "我见过最厉害的墙头草是我前公司的一位经理。当时部门进行架构调整，围绕两种方案产生了争论。这位经理在老领导面前极力推崇方案A，声称方案B存在重大风险；但当得知新领导倾向于方案B后，他在第二天的会议上立刻变成了方案B的坚定支持者，并声称自己一直认为方案B更有前瞻性，甚至开始批评支持方案A的同事'思想保守'。更讽刺的是，没人敢当面揭穿他，因为他与高层关系太好。",
        source: "某国企中层管理者"
      }
    ]
  },
  // 可以添加更多数据
  {
    id: '3',
    name: '张功劳收割机',
    rank: 3,
    skills: ['功劳窃取', '邀功请赏', '甩锅专家'],
    harmScore: 8.7,
    description: '从不做实事，却总是在项目成功时第一个站出来邀功。对失败的项目则迅速撇清关系，把责任推给他人。',
    behaviors: [
      '擅长在关键节点出现，制造"关键贡献"的假象',
      '经常抢先向领导汇报项目进展，着重强调自己的"贡献"',
      '会在邮件中巧妙地为自己邀功，将团队成果描述为自己的功劳',
      '对自己不擅长的工作巧妙地分配给他人，成功了则邀功',
      '项目失败时迅速撇清关系，甚至暗示是他人能力不足导致失败',
      '善于在公开场合表现活跃，但实际工作产出极少'
    ],
    strategies: [
      '建立明确的工作职责和贡献度量标准',
      '在团队中推行透明的进度汇报和成果展示机制',
      '保留工作记录和电子邮件，证明自己的实际贡献',
      '学会在适当的场合展示自己的工作成果',
      '与直接上级建立良好的沟通渠道，确保其了解团队中每个人的真实贡献',
      '在团队会议中鼓励所有成员分享进展，不给功劳收割者独占发言权的机会'
    ],
    analysis: '功劳收割者通常非常擅长展示自己和包装成果，却在实际贡献上投机取巧。他们深谙职场中的"展示效应"，明白在许多组织中，被看到的工作往往比实际完成的工作更重要。这类人通常口才出众，擅长使用专业术语，并对上级的期望有敏锐的把握。他们会精心选择投入少但曝光率高的工作，同时避开耗时耗力但不易被察觉的基础性工作。长期来看，这类行为会严重打击团队中真正做事的人的积极性，造成"劣币驱逐良币"的现象。',
    impactAreas: {
      '团队士气': 9.1,
      '工作公平感': 9.4,
      '团队效率': 8.3,
      '人才流失': 8.9,
      '组织文化': 8.5
    },
    stories: [
      {
        title: "汇报英雄，实干缺席",
        content: "我曾经的同事在每个项目中都很擅长'战略性出现'。在项目启动会上积极发言，给人留下深刻印象；项目进行期间几乎看不到他的实质性贡献；但在项目接近尾声时，他又会突然活跃起来，整理材料、准备汇报。最令人气愤的是，在向客户或高层的汇报中，他总是不动声色地把自己描述成项目的核心推动者，而那些真正日夜加班完成工作的同事则成了'提供支持的团队成员'。由于他的表达能力确实出众，很多高层真的相信他是关键贡献者。",
        source: "某咨询公司高级顾问"
      },
      {
        title: "邮件艺术大师",
        content: "我们组有位同事特别擅长利用邮件为自己'刷存在感'和'邀功'。每当有项目启动，他必定是第一个回复邮件表示'全力支持'；项目过程中，他经常发一些看似在推动项目但实际上毫无实质内容的邮件，还会故意抄送给所有相关领导；最绝的是，当别人完成了某项工作后，他能立刻发一封总结邮件，以'我们'为主语描述成果，并巧妙地突出自己的'指导'和'协调'作用。领导们看到的邮件记录中，他似乎是最积极主动的人，而真正做事的人反而存在感不强。",
        source: "某金融机构项目经理"
      }
    ]
  }
];

// 定义类型
interface Story {
  title: string;
  content: string;
  source: string;
}

interface ImpactAreas {
  [key: string]: number;
}

interface Troublemaker {
  id: string;
  name: string;
  rank: number;
  skills: string[];
  harmScore: number;
  description: string;
  behaviors: string[];
  strategies: string[];
  analysis: string;
  impactAreas: ImpactAreas;
  stories: Story[];
}

// 根据ID查找搅屎棍
const troublemaker = computed(() => {
  return troublemakersData.find(t => t.id === troublemakerId);
});

// 获取危害指数颜色样式
const getHarmScoreClass = (score: number) => {
  if (score >= 9) return 'bg-red-500';
  if (score >= 8) return 'bg-orange-500';
  if (score >= 7) return 'bg-yellow-500';
  if (score >= 6) return 'bg-blue-500';
  return 'bg-green-500';
};

// 获取危害指数文字颜色样式
const getHarmScoreColorClass = (score: number) => {
  if (score >= 9) return 'text-red-600 dark:text-red-400';
  if (score >= 8) return 'text-orange-600 dark:text-orange-400';
  if (score >= 7) return 'text-yellow-600 dark:text-yellow-400';
  if (score >= 6) return 'text-blue-600 dark:text-blue-400';
  return 'text-green-600 dark:text-green-400';
};

// 获取影响范围颜色样式
const getImpactClass = (score: number) => {
  if (score >= 9) return 'bg-red-500';
  if (score >= 8) return 'bg-orange-500';
  if (score >= 7) return 'bg-yellow-500';
  if (score >= 6) return 'bg-blue-500';
  return 'bg-green-500';
};

// 获取影响范围文字颜色样式
const getImpactColorClass = (score: number) => {
  if (score >= 9) return 'text-red-600 dark:text-red-400';
  if (score >= 8) return 'text-orange-600 dark:text-orange-400';
  if (score >= 7) return 'text-yellow-600 dark:text-yellow-400';
  if (score >= 6) return 'text-blue-600 dark:text-blue-400';
  return 'text-green-600 dark:text-green-400';
};

// 确保页面元素可见
onMounted(() => {
  try {
    // 先确保内容可见
    if (troublemaker.value) {
      document.querySelectorAll('.troublemaker-details')
        .forEach(el => {
          (el as HTMLElement).style.opacity = '1';
        });

      // 确保impact area元素可见
      document.querySelectorAll('.impact-area')
        .forEach(el => {
          (el as HTMLElement).style.opacity = '1';
        });
    }

    // 添加简单动画效果
    if ($gsap && troublemaker.value) {
      $gsap.from('.troublemaker-details', {
        opacity: 0,
        y: 20,
        duration: 0.8,
        ease: 'power2.out'
      });
    }
  } catch (error) {
    console.error('动画加载失败', error);
    // 确保内容可见（备用方案）
    if (troublemaker.value) {
      document.querySelectorAll('.troublemaker-details, .impact-area')
        .forEach(el => {
          (el as HTMLElement).style.opacity = '1';
        });
    }
  }
});
</script>